<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>今天吃什么 - 我的收藏</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
    }
  </style>
</head>
<body class="pb-16">
  <!-- 引入组件模板 -->
  <iframe src="components.html" class="hidden" id="components-frame"></iframe>
  
  <!-- 顶部导航栏 -->
  <div class="bg-white shadow-md px-4 py-3 flex items-center justify-between sticky top-0 z-10">
    <h1 class="text-lg font-medium text-gray-800">我的收藏</h1>
    <div>
      <button class="text-gray-600 px-2">
        <i class="fas fa-ellipsis-h"></i>
      </button>
    </div>
  </div>
  
  <!-- 分类标签 -->
  <div class="bg-white px-4 py-3 border-b">
    <div class="flex space-x-4">
      <button class="text-orange-500 font-medium pb-2 border-b-2 border-orange-500">全部</button>
      <button class="text-gray-500 pb-2">中餐</button>
      <button class="text-gray-500 pb-2">西餐</button>
      <button class="text-gray-500 pb-2">日料</button>
      <button class="text-gray-500 pb-2">快餐</button>
    </div>
  </div>
  
  <!-- 收藏列表 -->
  <div class="p-4">
    <div class="space-y-4" id="favorites-container">
      <!-- 收藏项目1 -->
      <div class="bg-white rounded-lg overflow-hidden shadow-sm">
        <div class="flex">
          <img src="https://images.unsplash.com/photo-1555126634-323283e090fa" alt="美食图片" class="w-24 h-24 object-cover">
          <div class="flex-1 p-3">
            <div class="flex justify-between items-start">
              <h3 class="font-medium">香辣牛肉面</h3>
              <button class="text-red-500">
                <i class="fas fa-heart"></i>
              </button>
            </div>
            <p class="text-xs text-gray-500 mt-1">中式面食 · 500m</p>
            <div class="flex items-center mt-1">
              <div class="flex text-yellow-400 text-xs">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
              </div>
              <span class="text-xs text-gray-500 ml-1">4.5</span>
            </div>
            <div class="flex justify-between items-center mt-2">
              <div class="text-orange-500 font-medium">¥28</div>
              <button class="bg-orange-500 text-white text-xs px-3 py-1 rounded-full">
                去点餐
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 收藏项目2 -->
      <div class="bg-white rounded-lg overflow-hidden shadow-sm">
        <div class="flex">
          <img src="https://images.unsplash.com/photo-1513104890138-7c749659a591" alt="美食图片" class="w-24 h-24 object-cover">
          <div class="flex-1 p-3">
            <div class="flex justify-between items-start">
              <h3 class="font-medium">意式肉酱披萨</h3>
              <button class="text-red-500">
                <i class="fas fa-heart"></i>
              </button>
            </div>
            <p class="text-xs text-gray-500 mt-1">意式料理 · 1.2km</p>
            <div class="flex items-center mt-1">
              <div class="flex text-yellow-400 text-xs">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
              <span class="text-xs text-gray-500 ml-1">4.8</span>
            </div>
            <div class="flex justify-between items-center mt-2">
              <div class="text-orange-500 font-medium">¥58</div>
              <button class="bg-orange-500 text-white text-xs px-3 py-1 rounded-full">
                去点餐
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 收藏项目3 -->
      <div class="bg-white rounded-lg overflow-hidden shadow-sm">
        <div class="flex">
          <img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8" alt="美食图片" class="w-24 h-24 object-cover">
          <div class="flex-1 p-3">
            <div class="flex justify-between items-start">
              <h3 class="font-medium">麻辣香锅</h3>
              <button class="text-red-500">
                <i class="fas fa-heart"></i>
              </button>
            </div>
            <p class="text-xs text-gray-500 mt-1">川菜 · 800m</p>
            <div class="flex items-center mt-1">
              <div class="flex text-yellow-400 text-xs">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="far fa-star"></i>
              </div>
              <span class="text-xs text-gray-500 ml-1">4.0</span>
            </div>
            <div class="flex justify-between items-center mt-2">
              <div class="text-orange-500 font-medium">¥45</div>
              <button class="bg-orange-500 text-white text-xs px-3 py-1 rounded-full">
                去点餐
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 收藏项目4 -->
      <div class="bg-white rounded-lg overflow-hidden shadow-sm">
        <div class="flex">
          <img src="https://images.unsplash.com/photo-1569058242567-93de6c36f198" alt="美食图片" class="w-24 h-24 object-cover">
          <div class="flex-1 p-3">
            <div class="flex justify-between items-start">
              <h3 class="font-medium">日式照烧鸡饭</h3>
              <button class="text-red-500">
                <i class="fas fa-heart"></i>
              </button>
            </div>
            <p class="text-xs text-gray-500 mt-1">日式料理 · 650m</p>
            <div class="flex items-center mt-1">
              <div class="flex text-yellow-400 text-xs">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
              </div>
              <span class="text-xs text-gray-500 ml-1">4.6</span>
            </div>
            <div class="flex justify-between items-center mt-2">
              <div class="text-orange-500 font-medium">¥32</div>
              <button class="bg-orange-500 text-white text-xs px-3 py-1 rounded-full">
                去点餐
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div class="hidden flex flex-col items-center justify-center py-16" id="empty-state">
      <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
        <i class="far fa-heart text-gray-400 text-3xl"></i>
      </div>
      <p class="text-gray-500 mb-2">暂无收藏</p>
      <p class="text-gray-400 text-sm">浏览美食时点击心形图标收藏喜欢的美食</p>
      <button class="mt-4 bg-orange-500 text-white px-4 py-2 rounded-full text-sm">
        去发现美食
      </button>
    </div>
  </div>
  
  <!-- 底部导航栏 -->
  <div id="bottom-nav"></div>
  
  <script>
    // 等待组件iframe加载完成
    document.getElementById('components-frame').onload = function() {
      const componentsDoc = document.getElementById('components-frame').contentDocument;
      
      // 插入底部导航
      const bottomNavTemplate = componentsDoc.getElementById('bottom-nav-template');
      document.getElementById('bottom-nav').innerHTML = bottomNavTemplate.innerHTML;
      
      // 设置当前页面导航项为活跃状态
      const favoritesLink = document.querySelector('#bottom-nav a[href="favorites.html"]');
      const favoritesIcon = favoritesLink.querySelector('i');
      const favoritesText = favoritesLink.querySelector('span');
      favoritesIcon.classList.replace('text-gray-400', 'text-orange-500');
      favoritesText.classList.replace('text-gray-600', 'text-orange-500');
      
      // 收藏按钮点击事件
      const heartButtons = document.querySelectorAll('.fa-heart');
      heartButtons.forEach(button => {
        button.parentElement.addEventListener('click', function() {
          // 移除当前项目
          const listItem = this.closest('.bg-white');
          listItem.classList.add('animate-fade-out');
          setTimeout(() => {
            listItem.remove();
            
            // 检查是否还有收藏项目
            const favoritesContainer = document.getElementById('favorites-container');
            if (favoritesContainer.children.length === 0) {
              document.getElementById('empty-state').classList.remove('hidden');
              favoritesContainer.classList.add('hidden');
            }
          }, 300);
        });
      });
    };
  </script>
</body>
</html> 